<template>
	<page-loading :show="pageLoading">
		<view v-if="userInfo.uid">
			<view class="personal" v-show="selectLog">
				<view class="personal-bg"></view>
				<view class="personal-avatar">
					<view class="avatar">
						<view class="avatar-wrapper" @click="uploadAvatar">
							<view class="avatar-wrapper-inner" v-if="userInfo.isIdentity">
								<image :src="userInfo.headImg" mode="widthFix" style="border-radius: 50%;"></image>
								<view class="avatar-wrapper-inner__text" style="position: absolute;" v-if="userInfo.headImg === ''"><text>点击上传头像</text></view>
							</view>
							<view class="avatar-wrapper-inner" v-else>
								<image src="https://files.yzsheng.com/AccountDefaultImg/defaultImg.png" mode="widthFix" style="border-radius: 50%;"></image>
							</view>
							<image class="avatar-wrapper-preview" :src="avatarUrl" mode="aspectFit"></image>
						</view>
						<view class="name">{{ userInfo.trueName || userInfo.userName }}</view>
						<view :class="['grade',userInfo.isIdentity === false?'color-fff':'']">{{userInfo.isIdentity === false ? '未注册用户' : userInfo.roleName }}</view>
					</view>
				</view>
				<view class="personal-info">
					<view class="card-info">
						<view class="card-info-title">个人信息</view>
						<view class="card-info-item" @click="editPhone" v-if="uid === tid">
							<view class="card-info-item-left">手机号</view>
							<view class="card-info-item-right">
								<text class="text">{{ userInfo.mobile }}</text>
								<u-icon name="arrow-right" size="26" color="#9A9A9A"></u-icon>
							</view>
						</view>
						<view class="card-info-item" v-if="uid !== tid">
							<view class="card-info-item-left">手机号</view>
							<view class="card-info-item-right">
								<text class="text">{{ userInfo.mobile }}</text>
								<!-- <u-icon name="arrow-right" size="26" color="#9A9A9A"></u-icon> -->
							</view>
						</view>
						<view class="card-info-item">
							<view class="card-info-item-left">职务</view>
							<view class="card-info-item-right"><input @blur="blurJob" type="text" style="text-align: right;" v-model="JobName" /></view>
						</view>
						<!-- 权限 -->
						<!-- 超级管理员看员工 -->
						<view class="card-info-item" v-if="isName === '超级管理员'">
							<view class="card-info-item-left">权限</view>
							<view class="card-info-item-right"></view>
							<view @click="bigChoosePermission" v-if="isName !== roleNamess">
								<text class="text">{{ userInfo.roleName }}</text>
								<u-icon name="arrow-right" size="26" color="#9A9A9A"></u-icon>
							</view>
							<text v-if="isName === roleNamess" class="text">{{ userInfo.roleName }}</text>
						</view>
						<!-- 如果自己是管理员 -->
						<view class="card-info-item" v-if="isName === '管理员'">
							<view class="card-info-item-left">权限</view>
							<view class="card-info-item-right"></view>
							<view v-if="roleNamess === '超级管理员'">
								<text class="text">{{ userInfo.roleName }}</text>
							</view>
							<view v-if="roleNamess === '员工'" @click="choosePermission">
								<text class="text">{{ userInfo.roleName }}</text>
								<u-icon name="arrow-right" size="26" color="#9A9A9A"></u-icon>
							</view>
							<text class="text" v-if="isName === roleNamess">{{ userInfo.roleName }}</text>
						</view>
						<view class="card-info-item" v-if="isName === '员工'">
							<view class="card-info-item-left">权限</view>
							<view>
								<text class="text">{{ userInfo.roleName }}</text>
							</view>
						</view>
						<view class="card-info-item">
							<view class="card-info-item-left">认证</view>
							<view :class="['card-info-item-right', userInfo.isIdentity === false ? 'color-EB5C02' : '']">{{ userInfo.isIdentity === false ? '未注册认证' : '实名' }}</view>
						</view>
						<view class="card-info-item" v-if="userInfo.InviteTime">
							<view class="card-info-item-left">邀请时间</view>
							<view class="card-info-item-right">{{ userInfo.InviteTime }}</view>
						</view>
						
					</view>
				</view>
				<!-- 员工自己查看 -->
				<view class="personal-bottom">
					<view v-if="isName === '员工'">
						<view class="personal-bottom-btn super" v-if="uid === tid">
							<view class="personal-bottom-btn remove" @click="isRemove = true">退出/离职</view>
							<view class="personal-bottom-btn" style="width: 410rpx;" @click="updateCompanyUserInfo(2)">保存信息</view>
						</view>
					</view>
					<!-- 管理员查看 -->
					<view v-if="isName === '管理员'">
						<!-- 自己看自己 -->
						<view class="personal-bottom-btn super" v-if="uid === tid">
							<view class="personal-bottom-btn remove" @click="isRemove = true">退出/离职</view>
							<view class="personal-bottom-btn" style="width: 410rpx;" @click="updateCompanyUserInfo(2)">保存信息</view>
						</view>

						<view class="personal-bottom-btn super" v-if="roleNamess === '员工' || (roleNamess === '管理员' && uid !== tid)">
							<view class="personal-bottom-btn remove" @click="isRemove = true">移除</view>
						<template>
									<view class="personal-bottom-btn" style="background-color:rgb(51,51,51); width: 410rpx;" @click="doInviteUser" v-if="userInfo.isIdentity === false">再次邀请</view>
									<view class="personal-bottom-btn" style="width: 410rpx;" @click="updateCompanyUserInfo(2)" v-else>保存信息</view>
						</template>
						</view>
<!-- 						<view class="personal-bottom-btn super" v-if="roleNamess === '管理员' && uid !== tid">
							<view class="personal-bottom-btn remove" @click="isRemove = true">移除</view>
							<view class="personal-bottom-btn" style="width: 410rpx;" @click="updateCompanyUserInfo(2)">保存信息</view>
						</view> -->
					</view>

					<view v-if="isName === '超级管理员'">
						<view class="personal-bottom-btn super" v-if="uid === tid">
							<view class="personal-bottom-btn remove" @click="goZr" style="width: 300rpx;">转让超管权限</view>
							<view class="personal-bottom-btn " style="width: 410rpx;" @click="updateCompanyUserInfo">保存信息</view>
						</view>
						<view class="personal-bottom-btn super" v-if="roleNamess !== isName">
							<view class="personal-bottom-btn remove" style="width: 290rpx;background-color: #333333;" @click="isRemove = true" v-if="roleNamess !== isName">移除</view>
							<template v-if="roleNamess !== isName">
										<view class="personal-bottom-btn" style="background-color:rgb(51,51,51); width: 410rpx;" @click="doInviteUser" v-if="userInfo.isIdentity === false">再次邀请</view>
										<view class="personal-bottom-btn" style="background-color:rgb(51,51,51); width: 410rpx;" @click="updateCompanyUserInfo" v-else>保存信息</view>
							</template>
					
						</view>
					</view>
				</view>
				<!-- 管理员看员工 -->
				<u-popup v-model="show" mode="bottom" class="popup2">
					<view class="popup2-title">权限</view>
					<view class="popup2-content">
						<view @click="onRole(item.name, item.id)" v-for="(item, index) in admin" :key="index">{{ (item.name, item.id) }}</view>
					</view>
				</u-popup>
				<!-- 超级管理员看员工 -->
				<u-popup class="x-popup" v-model="showTow" mode="bottom">
					<view style="">
						<view class="title">权限</view>
						<view class="list">
							<view class="item" @click="bigOnRole(item.name, item.id)" v-for="(item, index) in Role" :key="index">{{item.name}}</view>
						</view>
					</view>
				</u-popup>

				<!-- 移除 -->
				<u-modal :show-title="false" :show-confirm-button="false" v-model="isRemove">
					<view>
						<view class="title">温馨提示</view>
						<view class="content" v-if="uid === tid">退出离职后将不能管理、更改此公司在平台上的业务！</view>
						<view class="content" style="text-align: center;" v-else>是否确认移除此成员？</view>
						<view class="btn flex flex-jc-c flex-ai-c">
							<view class="btn-left" @click="isRemove = false">取消</view>
							<view class="btn-right" @click="removeUser" v-if="uid === tid">确认退出</view>
							<view class="btn-right" @click="removeUser" v-else>确认移除</view>
						</view>
					</view>
				</u-modal>
				<!-- 退出 -->
				<u-toast ref="uToast" />
			</view>
			<view class="" v-show="!selectLog"><kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="100" :height="100"></kps-image-cutter></view>
		</view>
		<u-mask :show="maskshow" ></u-mask>
	</page-loading>
</template>

<script src="./personalInfo.js"></script>

<style src="./personalInfo.scss" lang="scss"></style>
